<template>
	<view class="page-body">
		<StatusBar bgColor="bg-white"></StatusBar>

		<view class="search-box bg-white" :style="[{height:StatusBar.height+5+'px'}]">

			<text class="cuIcon-back backicon clickEffict" @click="back"
				:style="[{height:StatusBar.height+'px'}]"></text>
			<view class="input-search-box" :style="[{height:StatusBar.height+'px'}]">
				<input class="inputSearch1" type="text" style="background-color: #FFF7F7F7;" value="" placeholder="搜索订单"
					v-model="searchVal" />
				<text class="cuIcon-search iconsousuo" @click="search"></text>
			</view>
			
			
			

		</view>

		<scroll-view scroll-x="true" class="top-warp" :scroll-left="scrollTo">
			<view v-for="(tab, i) in tabs" :key="i" :class="{'active':curIndex===i}" @click="changeTab(i)">{{tab}}
			</view>
		</scroll-view>

		<swiper :style="{height: swiperHeight+'px'}" :current="curIndex" @change="swiperChange">
			<swiper-item v-for="(item,index) in tabs" :key="index">
				<mescroll-item :i="index" :searchVal="searchVal" :index="curIndex" :shopId="shop_id" :searchTime="searchTime"
					:orderType="orderType"></mescroll-item>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>

	import MescrollItem from "./orderList-item.vue";
	export default {
		components: {
			MescrollItem,
		},
		name: "OrderList",
		data() {
			return {
				StatusBar: this.Custom,
				title: "订单",
				scrollTo: 0,
				tabs: ['全部', '待支付', '待送达', '已完成', '已取消'],
				curIndex: 0, // 当前tab的下标
				swiperHeight: '0px',
				searchVal: '',
				searchTime: 0,
				orderType: "ShopCenter",
				shop_id:-1,
			}
		},
	
		props: {
			resh: {
				type: Number,
				default: -1
			},
			params: {
				type: Number,
				default: null
			}
		},
		watch: {
			resh(val) {
				this.checkLogin((res) => {
					if (res) {
						let preindex = this.curIndex;
						this.curIndex = -1;
						setTimeout(() => {
							this.curIndex = preindex;
						})
					}
				})
			},
			params(val) {
	
				this.params = val;
				this.shop_id=this.params;

				
			}
		},

		mounted() {
			this.shop_id=this.params;
			console.log("order "+this.shop_id);

			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = `${res.windowHeight}px`;
				}
			});
			
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 100;
				this.StatusBar=e.custom;
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
					success: function() {

					}

				});
			},
			getShopId(){
				
				return this.shop_id;
				
			},
			search() {
				if (this.searchVal == '') {
					uni.showToast({
						title: "请输入搜索的内容",
						icon: "none"
					})
				}
				this.searchTime++;
			},
			checkLogin(callback) {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					callback(false);
				} else {
					callback(true);
				}
			},
			refresh() {
				this.apiRequest('/buyer/userInfo', {
					area_id: uni.getStorageSync('area_id')
				}).then(res => {});
			},
			// 轮播菜单
			swiperChange(e) {
				this.changeTab(e.detail.current)
			},
			// 切换菜单
			changeTab(i) {
				this.curIndex = i
			}
		}
	}
</script>

<style>
	/* orderList*/
	.o-order-list {
		width: 100%;
		margin-top: 20rpx;
	}

	.o-order-item {
		width: 94%;
		margin: 0 auto 20rpx auto;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		position: relative;
		padding: 4%;
	}

	.o-order-item view {
		background-color: #FFFFFF;
	}

	.no-Order {
		width: 90%;
		height: 200rpx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10rpx;
	}


	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24rpx;
		background-color: #1270e0;
		z-index: 99;
	}

	.o-item-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.o-item-header view {
		line-height: 1.2;
	}

	.shop-logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}

	.shop-info {
		font-size: 24rpx;
		margin-left: 15rpx;
		width: 60%;
	}

	.shop-info .title {
		color: #000000;
		font-weight: bold;
	}

	.shop-info .addtime {
		font-size: 20rpx;
		color: #666666;
	}

	.horseInfo .deliveryMer {
		margin-left: 15rpx;
		color: #FF5053;
	}

	.shop-info .self-tag {
		font-weight: bold;
		font-size: 20rpx;
		color: #FF3333;
	}

	.o-item-header .status {
		margin-left: auto;
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
	}

	.o-item-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.o-item-content .goodImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 15rpx;
	}

	.o-item-content .goods-name {
		font-size: 24rpx;
		color: #666666;
		margin-left: 15rpx;
		width: 60%;
	}

	.o-item-content .goods-name .spec-key {
		font-size: 20rpx;
	}

	.o-item-content .goods-price {
		width: 20%;
		text-align: right;
	}

	.o-item-content .goods-price .num {
		color: #666666;
		font-size: 20rpx;
	}

	.o-item-footer {
		text-align: right;
		margin-top: 20rpx;
	}

	.o-item-footer .order-btn {
		padding: 2rpx 10rpx;
		border: 1px solid #666666;
		border-radius: 10rpx;
		margin-left: 15rpx;
		font-size: 28rpx;

	}

	.o-item-footer .order-btn-blue {
		padding: 2rpx 10rpx;
		border: 1px solid #1270e0;
		border-radius: 10rpx;
		margin-left: 15rpx;
		font-size: 28rpx;
		color: #1270E0;
	}

	.right-ico {
		font-size: 20rpx;
		color: #999999;
		margin-left: 15upx;
	}


	.search-box {
		width: 100vw;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		justify-content: flex-start;

	}

	.input-search-box {
		background: #F7F7F7;
		border-radius: 20upx;
	}

	.inputSearch1 {
		width: 80%;
		height: 100%;
		padding-left: 5%;
		background-color: #FFF7F7F7;
		border-radius: 20upx;

	}

	.top-warp {
		z-index: 9990;
		position: relative;
		left: 0;
		width: 100%;
		text-align: center;
		white-space: nowrap;
	}

	.top-warp view {
		display: inline-block;
		width: 20%;
		line-height: 100rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #333333;
		background-color: #FFFFFF;
	}

	.top-warp .active {
		border-bottom: 6rpx solid #000000;
		color: #000000;
		font-weight: bold;
	}
</style>
